<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>艺龙导航栏</title>
<style>
*{
  padding:0px;
  margin:0px;
}
.nav{
  height:50px;
  background:#2064c8;
  line-height:50px;
  margin:0px auto;
}
.nav_title{
  width:1200px;
  margin:10px auto;
}
.nav ul{
  list-style:none;
  width:1200px;
  height:50px;
}
.nav ul li{
  width:140px;
  float:left;
  border-right:1px solid #2980ff;
  text-align:center;
  height:50px;
  position:relative;
}
.nav ul li a:link{
  display:block;
  width:140px;
  height:50px;
  color:white;
  text-decoration:none;
}
.nav ul li a:hover{
  background:#003679;
  text-decoration:none;
}
.nav ul li span{
  width:40px;
  height:20px;
  color:white;
  line-height:20px;
  font-size:12px;
  font-weight:100;
  position:absolute;
  background:#ff8e00;
  top:-8px;
  left:80px;
}


.cart{
  width:132px;
  height:36px;
  text-align:center;
  border:1px solid #eee;
}
.car{
  width:102px;
  margin:0px auto;
}
.cart:hover{
  border:1px solid red;
}
.cart_icon,.mycart{
  float:left;
  list-style:none;
}
.cart .cart_icon{
  width:32px;
  height:36px;
  line-height:36px;
  margin-right:10px;
  text-align:center;
  font-size:8px;
  position:relative;
}
.cart .cart_icon span{
  display:block;
  color:white;
  width:16px;
  height:12px;
  background:red;
  border-radius:40%;
  text-align:center;
  line-height:12px;
  position:absolute;
  top:0px;
  right:0px;
}
.cart .mycart a:link{
 color:red;
 text-decoration:none;
}
.cart .mycart a:hover{
 text-decoration:none;
 cursor:pointer;
}
.cart .cart_icon img{
  width:30px;
}
.cart .mycart{
  width:60px;
  height:32px;
  line-height:36px;
  font-size:10px;
  color:red;
}

.right{
 width:40px;
 height:100%;
}
.sidebar{
  width:36px;
  height:100%;
  margin-right:0px
  position:fixed;
  top:0px;
  right:0px;
}
.sidebar .side_middle{
  width:36px;
  height:190px;
  position:fixed;
  right:0px;
  top:50%;
  margin-top:-95px;
}
.sidebar,.line{
  float:left;
}

.line{
  width:4px;
  height:100%;
  background:#7a6e6e;
  margin-right:0px;
  position:fixed;
  right:0px;
  top:0px;
}
.sidebar .side_bottom{
  width:36px;
  height:114px;
  position:fixed;
  right:0px;
  bottom:0px;
}
.sidebar .side_middle ul li{
  width:36px;
  height:36px;
  line-height:36px;
  float:left;
  background:#7a6e6e;
  list-style:none;
  margin-bottom:2px;
  text-align:center;
}

.sidebar .side_bottom ul li{
  width:36px;
  height:36px;
  line-height:36px;
  float:left;
  background:#7a6e6e;
  list-style:none;
  margin-bottom:2px;
  text-align:center;
}

.sidebar .side_middle ul li img{
  width:20px;
}
.sidebar .side_bottom ul img{
  width:20px;
}

.content{
  width:100%;
  height:2000px;
}
</style>
</head>
<body>
<div class="nav">
  <div class="nav_title">
    <ul>
      <li><a href="#">首页</a></li>
      <li><a href="#">国内酒店</a></li>
      <li><a href="#">海外酒店</a><span>低价促</span></li>
      <li><a href="#">国内•国际机票</a><span>新升级</span></li>
      <li><a href="#">火车票</a></li>
      <li><a href="#">汽车票</a></li>
      <li><a href="#">商旅</a></li>
    </ul>
  </div>
</div>
<br />

<div class="cart">
  <div class="car">
    <div class="cart_icon"><img src="cart.png" /><span>0</span></div>
    <div class="mycart"><a href="#"><span>我的购物车</span></a></div>
  </div>
</div>
<br />
<div class="content"></div>
<div class="right">
<div class="sidebar">
  <div class="side_middle">
    <ul>
      <li><img src="communication-icon.png" /></li>
      <li><img src="member.png" /></li>
      <li><img src="car.png" /></li>
      <li><img src="coupon.png" /></li>
      <li><img src="message.png" /></li>
    </ul>
  </div>
  <div class="side_bottom">
    <ul>
      <li><img src="code.png" /></li>
      <li><img src="review.png" /></li>
      <li><img src="top.png" /></li>
    </ul>
  </div>
</div>
<div class="line"></div>
</div>
</body>
</html>
